<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <div class="container-module">
        <!-- <div class="title-module">选品采购记录</div> -->
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item label="商户Id" class="search-form-item">
                <el-input
                  :maxlength="20"
                  v-model="searchForm.mer_id"
                  placeholder="请输入订单编号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="订单编号" class="search-form-item">
                <el-input
                  :maxlength="20"
                  v-model="searchForm.mer_order_no"
                  placeholder="请输入订单编号"
                  clearable
                />
              </el-form-item>
            </div>
            <div style="margin: 5px 0; text-align: right">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resettingWay"
                >重置</el-button
              >
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px 20px">
        <el-row class="marginBottom" :gutter="20" style="display: flex">
          <div style="flex: 1">
            <!-- <el-button @click="pathWay" icon="el-icon-tickets" type="primary"
            >售后订单</el-button
          > -->
          </div>
          <div>
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="resettingWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-row>
        <el-row>
          <el-col class="with_search_card">
            <el-table
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              v-loading="loading"
              highlight-current-row
              :data="orderList"
              style="width: 100%"
              height="100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="tableTheadOptions[fruit].label == '支付方式'">
                    <el-tag
                      size="mini"
                      v-show="scope.row.pay_type == item.tag_value"
                      v-for="(item, index) in payTypeList"
                      :key="index"
                      >{{ item.tag_name }}</el-tag
                    >
                  </div>
                  <div v-else-if="tableTheadOptions[fruit].label == '支付状态'">
                    <el-tag
                      type="danger"
                      size="mini"
                      v-if="scope.row[fruit] == 1"
                      >未支付</el-tag
                    >
                    <el-tag size="mini" v-else>已支付</el-tag>
                  </div>
                  <div v-else-if="tableTheadOptions[fruit].label == '售后状态'">
                    <el-tag size="mini" v-if="scope.row[fruit] == 1"
                      >无售后信息</el-tag
                    >
                    <el-tag size="mini" v-else>售后中</el-tag>
                  </div>
                  <div
                    v-else-if="tableTheadOptions[fruit].label == '商品图片'"
                    style="width: 40px; height: 40px; margin: 0 auto"
                  >
                    <el-image
                      :src="scope.row[fruit]"
                      :preview-src-list="[scope.row[fruit]]"
                    />
                  </div>
                  <div v-else>
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row[fruit] + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="订单状态"
                min-width="80"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                  style="color: #f86d60;"
                    v-if="scope.row.status == 1"
                    >待支付</span
                  >
                  <span
                   style="color: #13ce66;"
                    v-if="scope.row.status == 4"
                    >已完成</span
                  >
                  <span v-if="scope.row.status == 5"
                    >已取消</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                min-width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="goodsDeteil(scope.row)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row style="text-align: right; margin-top: 20px">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="searchForm.page"
            :limit.sync="searchForm.count"
            @pagination="getListWay"
          />
        </el-row>
      </div>
    </div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="65%" :withHeader="false"
      :visible.sync="orderDialog" @close="productclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>订单信息</span>
          <div class="close" @click="productclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <div style="position: relative;padding: 20px;" v-loading="orderDialogLoading">
        <div class="flex-between info-box font14">
          <div class="flex infobox-left">
            <div class="proimage">
              <el-image :src="orderDetail.goods_main_image" style="width: 60px;height: 60px;border-radius: 6px;" />
            </div>
            <div>
              <div>商户名称：{{ orderDetail.id }}</div>
              <div>商户类型：{{ orderDetail.id }}</div>
            </div>
            <div class="marginLeft40">
              <div>联系人：{{ orderDetail.id }}</div>
              <div>商户类目：{{ orderDetail.id }}</div>
            </div>
            <div class="marginLeft40">
              <div>联系电话：{{ orderDetail.id }}</div>
              <div>覆盖区域：{{ orderDetail.id }}</div>
            </div>
          </div>
          <div class="infobox-right">
            状态：<span style="color: #81b65c;">启用</span>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-tabs v-model="activeNames" @tab-click="infotabshandleClick">
            <el-tab-pane label="采购信息" name="procurement_information"></el-tab-pane>
            <el-tab-pane label="采购售后信息" name="aftersales_information"></el-tab-pane>
            <el-tab-pane label="自提信息" name="selfpickup_information"></el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeNames == 'procurement_information'">
          <div class="informationTitleView" >
          <div class="leftBox">
            <div class="leftborder"></div>
            <div class="text">商户商品信息</div>
          </div>
          <div class="right"></div>
        </div>
        <el-descriptions :column="2">
          <el-descriptions-item label="商品名称" :span="2" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.order_detail ? orderDetail.order_detail[0].product_name : '-'}}
          </el-descriptions-item>
          <el-descriptions-item label="商品编号" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.mer_order_no }}
          </el-descriptions-item>
          <el-descriptions-item label="供应商" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.user_phone }}
          </el-descriptions-item>
          <el-descriptions-item label="成本单价" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.user_address }}
          </el-descriptions-item>
          <el-descriptions-item label="商品类型" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.total_freight_price }}
          </el-descriptions-item>
          <el-descriptions-item label="所属类目" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.total_price }}
          </el-descriptions-item>
          <el-descriptions-item label="商品副标题" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.pay_price }}
          </el-descriptions-item>
          <el-descriptions-item label="商品标签" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.coupon_id }}
          </el-descriptions-item>
          <el-descriptions-item label="支付状态" label-class-name="my-label" content-class-name="description">
            <span style="color:#f86d60;" v-if="orderDetail.pay_status == 1"
              >未支付</span
            >
            <span style="color: #13ce66;" v-else>已支付</span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="informationTitleView">
          <div class="leftBox">
            <div class="leftborder"></div>
            <div class="text">采购订单信息</div>
          </div>
          <div class="right"></div>
        </div>
        <el-descriptions :column="2">
          <el-descriptions-item label="采购编号" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.mer_order_no }}
          </el-descriptions-item>
          <el-descriptions-item label="采购类型" label-class-name="my-label" content-class-name="description">
            提货券
          </el-descriptions-item>
          <el-descriptions-item label="采购数量" label-class-name="my-label" content-class-name="description">
            {{orderDetail.order_detail ? orderDetail.order_detail[0].product_num : '-'}}
          </el-descriptions-item>
          <el-descriptions-item label="采购费用" label-class-name="my-label" content-class-name="description">
            <div style="color: #567722;">
               {{orderDetail.total_price}} <span style="font-size: 10px;font-weight: 550;">提货券</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="采购时间" label-class-name="my-label" content-class-name="description">
            {{orderDetail.created_at}}
          </el-descriptions-item>
          <el-descriptions-item label="采购总费用" label-class-name="my-label" content-class-name="description">
            <div style="color: #567722;">
                 {{orderDetail.pay_price}}<span style="font-size: 10px;font-weight: 550;">提货券</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="结算时间" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.pay_time }}
          </el-descriptions-item>
          <el-descriptions-item label="备注" label-class-name="my-label" content-class-name="description">
            {{ orderDetail.remark }}
          </el-descriptions-item>

        </el-descriptions>
        </div>


      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getMerchantOrderList,
  getMerchantOrderDetail,
} from "@/api/merchant/index";
import { getDictionaryTypeList } from "@/api/index";
const tableTheadOption = {
  id: {
    label: "ID",
    field: "id",
  },
  mer_order_no: {
    label: "订单编号",
    field: "mer_order_no",
  },
  created_at: {
    label: "下单时间",
    field: "created_at",
  },
  pay_time: {
    label: "采购时间",
    field: "pay_time",
  },
  mer_name: {
    label: "商户名称",
    field: "mer_name",
  },
  goods_name: {
    label: "商品名称",
    field: "goods_name",
  },
  goods_image: {
    label: "商品图片",
    field: "goods_image",
  },
  purchase_num: {
    label: "采购数量",
    field: "purchase_num",
  },
  coupon_unit: {
    label: "提货价",
    field: "coupon_unit",
  },
  pay_price: {
    label: "支付提货券",
    field: "pay_price",
  },
  user_phone: {
    label: "用户手机号",
    field: "user_phone",
  },
  user_address: {
    label: "用户地址",
    field: "user_address",
  },
  total_freight_price: {
    label: "总运费",
    field: "total_freight_price",
  },
  total_price: {
    label: "总金额",
    field: "total_price",
  },
  // pay_status: {
  //   label: "支付状态",
  //   field: "pay_status",
  // },
  pay_type: {
    label: "支付方式",
    field: "pay_type",
  },
  // refund_status: {
  //   label: "售后状态",
  //   field: "refund_status",
  // },
  remark: {
    label: "备注",
    field: "remark",
  },
};

const allTableThead = [
  "id",
  "mer_order_no",
  "created_at",
  "pay_time",
  "mer_name",
  "goods_name",
  "goods_image",
  "purchase_num",
  "coupon_unit",
  "pay_price",
  "user_phone",
  "user_address",
  "total_freight_price",
  "total_price",
  // "pay_status",
  "pay_type",
  // "refund_status",
  "remark",
];
const defaultTableThead = [
  "mer_order_no",
  "mer_name",
  "goods_name",
  "purchase_num",
  "coupon_unit",
  "pay_price",
  "pay_time",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchDisplay: false,
      searchForm: {
        page: 1, //分页页码，数字类型
        count: 10, //每页数量
        mer_order_no: "",
        mer_id: "",
      },
      orderList: [],
      total: 0,
      // 支付类型列表
      payTypeList: [],
      // 订单详情
      orderDialog: false,
      orderDialogLoading: false,
      orderDetail: {},
      activeNames:'procurement_information'
    };
  },
  created() {
    this.loading = true;
    getDictionaryTypeList({ type: "pay_type" }).then((res) => {
      this.payTypeList = res.data;
      this.getListWay();
    });
  },
  methods: {
    //切换tab
    infotabshandleClick(tab, event) {

    },
    //关闭详情弹窗
    productclose(){
      this.orderDialog = false
    },
    getListWay() {
      this.loading = true;
      getMerchantOrderList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.orderList = res.data.list;
        this.total = res.data.total;
        console.log(this.orderList);
      });
    },
    // 重置搜索表单
    resettingWay() {
      this.searchForm = {
        page: 1, //分页页码，数字类型
        count: 10, //每页数量
        mer_order_no: "", //订单编号
        user_name: "", //用户名字
        user_phone: "", //用户电话
        pay_status: "", //支付状态(1.未支付,2.已支付)
        pay_type: "", //支付方式
        status: "", //状态
        type: "", //类型(1.正常商品,2.活动商品)
        mer_id: "", //商户ID
      };
    },
    goodsDeteil(row) {
      this.orderDialog = true;
      this.orderDialogLoading = true;
      getMerchantOrderDetail({ mer_id: row.mer_id, id: row.id }).then((res) => {
        this.orderDialogLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.orderDetail = res.data;
      });
    },
    pathWay() {
      this.$router.push("/merchant/order/afterpurchase");
    },
  },
};
</script>

<style lang="scss">
  .my-label {
      font-size: 14px;
      font-weight: 550;
      line-height: 30px;
    }

    .description {
      line-height: 30px;
      font-size: 14px;
      font-weight: 550;
    }
.el-divider--horizontal {
  margin: 10px 0 !important;
}
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;
  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }
  .el-input {
    width: 180px;
  }
}
</style>
    <style lang="scss" scoped>
.proimage{
  width: 60px; height: 60px;margin-right: 30px;
}
.marginBottom-10 {
  margin-bottom: 10px;
}
.marginRight-10 {
  margin-right: 10px;
}
.flex {
  display: flex;
}
.font14 {
  font-size: 14px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.marginLeft40 {
  margin-left: 100px;
}

.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;
  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }
  .reset-box {
    background: #eeeeee;
  }
}
.info-box {
  margin-bottom: 12px;
  color: #606266;
  border: 1px solid #ededed;
  padding: 14px 10px 14px 18px;
  border-radius: 3px;
  border-radius: 6px;
  font-weight: 550;

  .infobox-left > div > div:first-child {
    margin-bottom: 20px;
  }

  .infobox-right {
    color: #9a9a9a;
  }
}
.app-container {
  background: #f3f5f7;
  .container-module {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    .title-module {
      font-size: 18px;
    }
    .search-form {
      padding-top: 10px;
    }
    .search-module {
      padding-top: 20px;
      display: block;
    }
    .table-module {
      .table-top {
        margin-bottom: 20px;
      }
      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}

</style>
